<%@page import="com.etc.zzsys.entity.Users"%>
<%@page import="java.util.List"%>
<%@page import="com.zzsys.dao.impl.UsersDaoImpl"%>
<%@page import="com.zzsys.dao.UsersDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>users_jstl_page</title>


<!-- layui的css -->

<link href="layui/css/layui.css" rel="stylesheet">
<!-- layui的js -->

<script src="layui/layui.js"></script>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">


<!-- Custom styles for this template -->
<link href="css/dashboard.css" rel="stylesheet">

<!-- jquery.js -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- bootstrap.js  -->
<script src="js/bootstrap.js"></script>
<link href="css/dashboard.css" rel="stylesheet">



<style>
   #pageDiv{text-align:center}
</style>



</head>

<body>

	<%-- <%@ include file="session.jsp" %> --%>

	<jsp:include page="session.jsp"></jsp:include>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">




			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Project name</a>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">Dashboard</a></li>
					<li><a href="#">Settings</a></li>
					<li><a href="#">Profile</a></li>
					<li><a href="#">Help</a></li>
				</ul>
				<form class="navbar-form navbar-right">
					<input type="text" id="searchLike" class="form-control" placeholder="Search..." value="${strLike}">
					<!-- 普通的button -->
					<button type="button" id="btnSearch" class="btn btn-primary">查询</button>
				</form>
			</div>
		</div>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<ul class="nav nav-sidebar">
					<li><a href="homepage.jsp">首页 <span class="sr-only">(current)</span></a></li>
					<!-- 用户列表选项处于激活状态  -->
					<li><a href="us2">用户列表</a></li>
					<li><a href="useradd.jsp">增加用户</a></li>
					<li class="active"><a href="us2?op=queryBypage">用户列表[JSTL]</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><a href="">Nav item</a></li>
					<li><a href="">Nav item again</a></li>
					<li><a href="">One more nav</a></li>
					<li><a href="">Another nav item</a></li>
					<li><a href="">More navigation</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><a href="">Nav item again</a></li>
					<li><a href="">One more nav</a></li>
					<li><a href="">Another nav item</a></li>
				</ul>
			</div>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

				<h2 class="sub-header">用户列表</h2>

				<div class="table-responsive">

					<table class="table table-striped">
						<thead>
							<tr>
								<th>用户编号</th>
								<th>用户名</th>
								<th>性别</th>
								<th>电话</th>
								<th>地址</th>
								<th>等级</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<c:if test="${requestScope.pageData.data!=null}">
								<c:forEach var="users" items="${requestScope.pageData.data}">
							
								<tr>
										<td>${users.userId}</td>
										<td>${users.userName}</td>
										<td>${users.userSex}</td>
										<td>${users.userTel}</td>
										<td>${users.userAddress}</td>
										<td>${users.userLevel== 0 ? "管理员" : "普通用户"}</td>
										<td>${users.userState== 0 ? "禁用" : "启用"}</td>
										<td>
											<!-- <button class="btn btn-danger">修改</button> --> <a
											class="btn btn-danger update" id="modal-919220"
											href="#modal-container-919220" role="button"
											data-toggle="modal">修改</a> <!-- <button class="btn btn-danger">删除</button> -->
											<!-- 使用超链接来完成删除访问 参数的传递   ,问题:删除之前要确认一下.--> <a
											href="us2?op=del&userId=${users.userId}"
											class="btn btn-danger">删除</a>
										</td>
									</tr>
									
								</c:forEach>
							</c:if>

						</tbody>
					</table>
					<!-- 分页区域，配合layui page使用 -->
					<div id="pageDiv"></div>
				</div>
			</div>
		</div>


		<!-- 遮罩层开始 -->
		<div class="row clearfix">
			<div class="col-md-12 column">


				<div class="modal fade" id="modal-container-919220" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<!-- 表单提交给servlet,明确行为是update -->
					<form class="form-horizontal" action="us2?op=update" method="post">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">×</button>
									<h4 class="modal-title" id="myModalLabel">修改</h4>
								</div>
								<div class="modal-body">



									<div class="form-group">
										<label for="username" class="col-sm-2 control-label">用户编号</label>
										<div class="col-sm-6">
											<input type="text" class="form-control" id="userId"
												name="userId" readonly>
										</div>
									</div>

									<div class="form-group">
										<label for="username" class="col-sm-2 control-label">用户名</label>
										<div class="col-sm-6">
											<input type="text" class="form-control" id="userName"
												placeholder="请输入用户名" required="required" name="userName">
										</div>
									</div>


									<div class="form-group">
										<label for="inputPassword3" class="col-sm-2 control-label">性别</label>
										<div class="col-sm-2">
											<select class="form-control" name="userSex" id="userSex">
												<option value="男">男</option>
												<option value="女">女</option>
											</select>
										</div>
									</div>


									<div class="form-group">
										<label for="inputPassword3" class="col-sm-2 control-label">电话号码</label>
										<div class="col-sm-6">
											<input type="text" class="form-control" id="userTel"
												placeholder="请输入电话号码" required="required" name="userTel"
												id="userTel">
										</div>
									</div>

									<div class="form-group">
										<label for="inputPassword3" class="col-sm-2 control-label">用户地址</label>
										<div class="col-sm-6">
											<input type="text" class="form-control" id="userAddress"
												placeholder="请输入地址" name="userAddress">
										</div>
									</div>


									<div class="form-group">
										<label for="inputPassword3" class="col-sm-2 control-label">用户状态</label>
										<div class="col-sm-4">
											<select class="form-control" name="userState" id="userState">
												<option value="1">启用</option>
												<option value="0">禁用</option>
											</select>
										</div>
									</div>




								</div>

								<div class="modal-footer">
									<button type="button" class="btn btn-default"
										data-dismiss="modal">关闭</button>
									<button type="submit" class="btn btn-primary">保存</button>
								</div>
							</div>


						</div>
					</form>

				</div>

			</div>
		</div>
		<!-- 遮罩层结束 -->


	</div>

	<script>
		$(function() {
			//修改按钮的单击事件
			$(".update").click(
					function() {
						//自己 $(this) update这个超链接
						//$(this).parents("tr") 超链接所在的行
						//find("td").eq(0) 查找td，那个? 0 第一个td
						var userId = $(this).parents("tr").find("td").eq(0)
								.text();
						var userName = $(this).parents("tr").find("td").eq(1)
								.text();
						var userSex = $(this).parents("tr").find("td").eq(2)
								.text();
						var userTel = $(this).parents("tr").find("td").eq(3)
								.text();
						var userAddress = $(this).parents("tr").find("td")
								.eq(4).text();
						var userState = $(this).parents("tr").find("td").eq(6)
								.text();
						console.log(userName);
						//找到userName文本框，赋值为userName变量值
						$("#userId").val(userId);
						$("#userName").val(userName);
						$("#userSex").val(userSex);
						$("#userTel").val(userTel);
						$("#userAddress").val(userAddress);
						$("#userState").val(userState == "启用" ? 1 : 0);

					});

		});
	</script>
	
	
<script>
//将layui的代码转移到页面尾部.

layui.use(['laypage', 'layer'], function(){
	
  //定义两个变量 laypage  layer
  var laypage = layui.laypage
  ,layer = layui.layer;
  
  
  //完整功能
  laypage.render({
    elem: 'pageDiv'  //指向存放分页的容器,pageDiv是一个层的div
    ,count: ${requestScope.pageData.totalCount==null?0:requestScope.pageData.totalCount}   //数据总数。一般通过服务端得到 
    ,curr : ${requestScope.pageData.page==null?1:requestScope.pageData.page} //当前页
    ,limit :${requestScope.pageData.pageSize==null?10:requestScope.pageData.pageSize} //每页的记录数
    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义排版
    ,jump: function(obj,first){  //切换分页的回调
      console.log(obj) ;//obj（当前分页的所有选项值）
      
      console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
      console.log(obj.limit); //得到每页显示的条数
      
      if(!first)
    	  {
    	  //跳页的具体请求 js代码
    	  location.href="us2?op=queryBypage&page="+obj.curr+"&pageSize="+obj.limit+"&strLike="+$("#searchLike").val();
    	  //每次都知道page的值是多少?
    	  }
    }
  });
  
  
});


//查询的按钮
  $(function(){
	  
	  $("#btnSearch").click(function(){		  
		  location.href="us2?op=queryBypage&strLike="+$("#searchLike").val()+"&page=1&pageSize="+${requestScope.pageData.pageSize==null?10:requestScope.pageData.pageSize};
	  });
	  
	  
  });

</script>


</body>
</html>
